<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 2.添加变化 HTML 的结构 -->
        <div>
            <div @click="handleClick('demo1')">demo1</div>
            <div @click="handleClick('demo2')">demo2</div>
            <div @click="handleClick('demo3')">demo3</div>
        </div>
        <!-- 1.通过component绑定动态组件  is属性：动态绑定组件 -->
        <component v-bind:is="componentId"></component>
    </div>

    <script src="./vue.js"></script>
    <script>
        Vue.component("demo1",{
            template: `<div>组件模板一</div>`
        });
        Vue.component("demo2",{
            template: `<div>组件模板二</div>`
        });
        Vue.component("demo3",{
            template: `<div>组件模板三</div>`
        });

        let vm = new Vue({
            el: '#app',
            data: {
                componentId:"demo1",
            } ,
            methods: {
                handleClick: function(id){
                    this.componentId = id;
                }
            }
        });
    </script>
</body>
</html>